<template>
	<!-- 确认退税 -->
	<view v-if="ruleForm">
		<view class="tax-refund_details">
			<view class="title">退税金额</view>
			<view class="amount">
				<text class="u-margin-right-20 u-font-40">¥</text>
				<text>{{ruleForm.amount | thousands}}</text>
			</view>
			<u-line color="#F2F2F2" />
			<view class="export-number">
				<text>出口申请单号：</text>
				<text>{{ ruleForm.carOutApplyId }}</text>
			</view>
		</view>
		<view class="tax-refund_item">
			<view>退税银行</view>
			<view class="u-flex" @click="shows.bank = true">
				<view class="u-margin-right-10">
					<text v-if="!ruleForm.sellerBankId" style="color: #949494;">选择退税银行</text>
					<text v-else>{{getStatusLabel(banks,ruleForm.sellerBankId,'id','bankName')}}</text>
				</view>
				<image src="@/static/img/icon_arrowright.png"></image>
			</view>
		</view>
		<view class="tax-refund_item" v-if="ruleForm.billUrl">
			<view>退税单</view>
			<view class="u-flex" @click="openFile(ruleForm.billUrl)">
				<view class="u-margin-right-10" style="color: #949494;">查看</view>
				<image src="@/static/img/icon_arrowright.png"></image>
			</view>
		</view>
		<view class="tax-refund_button">
			<u-button @click="handleSubmit" type="success" shape="circle" :custom-style="{
				'background':' #0FBD7F',
				'height': '48px',
				'font-size':'17px'
			}">去结算</u-button>
		</view>

		<u-select value-name="id" label-name="bankName" v-model="shows.bank" :list="banks"
			@confirm="onBanks"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		openFile
	} from '@/utils/index.js'
	import {
		getStatusLabel
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				ruleForm: null,
				banks: [],
				shows: {
					bank: false
				}
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('taxRefundItem', (item) => {
				this.ruleForm = {
					id: item.id,
					carOutApplyId: item.carOutApplyId,
					amount: item.amount,
					billUrl: item.billUrl,
				}
			})

			this.$api.getSellerBankList().then(res => {
				this.banks = res.result || []
			})
		},
		methods: {
			handleSubmit() {
				if (!this.ruleForm.sellerBankId) {
					this.$toast('请选择退税银行', this)
					return
				}
				uni.showLoading({
					title: '加载中...'
				});
				this.$api.setSettlementBank(this.ruleForm).then(res => {
					uni.hideLoading();
					uni.navigateBack({
						delta: -1
					})
				})
			},
			onBanks(list) {
				this.$set(this.ruleForm, 'sellerBankId', list[list.length - 1].value)
			},
			openFile,
			getStatusLabel
		}
	}
</script>
<style scoped lang="less">
	.title {
		color: #202020;
		font-size: 15px;
	}

	.tax-refund_details {
		margin: 10px 0;
		background: #fff;
		padding: 20px 15px 15px 15px;

		.amount {
			color: #F76260;
			font-size: 32px;
			font-weight: bold;
			margin: 15px 0;
		}

		.export-number {
			font-size: 15px;
			color: #949494;
			margin-top: 15px;
		}
	}

	.tax-refund_item {
		background: #FFFFFF;
		padding: 19px 15px;
		margin-top: 10px;
		color: #202020;
		font-size: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 12px;
			height: 12px;
		}
	}

	.tax-refund_button {
		margin: 50px 30px 0 30px;
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>